<template>
    <div class="header-box">
        <div class="header">
            <div class="content">
                <div class="logo full-left">
                    <router-link to="/"><img src="/static/image/logo.png" alt=""></router-link>
                </div>
                <ul class="nav full-left" v-for="(header,key) in header_list">

                    <li><span><a :href="header.link">{{header.title}}</a></span></li>
                </ul>
                <div class="login-bar full-right">
                    <div class="shop-cart full-left">
                        <img src="/static/image/cart.svg" alt="">
                        <span><router-link to="/cart">{{this.$store.state.cart_length}} 购物车</router-link></span>
                    </div>
                    <div class="login-box full-left">
                        <router-link v-bind:to="link_login">{{login_name}}</router-link>
                        &nbsp;|&nbsp;
                        <!--                        <span>{{register_name}}</span>-->
                        <button @click="register_button">{{register_name}}</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>


    export default {
        name: "Header",
        data() {
            return {
                header_list: [],
                login_name: '登录',
                register_name: "注册",
                link_login: "/home/login/",
                link_register: "/home/register/"
            }
        },
        methods: {
            //获取首页导航栏的信息
            get_all_header() {
                this.$axios({
                    url: "http://127.0.0.1:9000/home/header/",
                    method: "get"
                }).then(res => {
                    console.log(res.data);
                    this.header_list = res.data
                    //在未点击记住我的情况下,使用session存储用户名,在展示导航栏的时候直接将登录按钮替换为用户名
                    //条件判断:如果有session中有name值,表示登录成功了,然后进行修改
                    if (sessionStorage["name"]) {
                        this.login_name = sessionStorage["name"];
                        this.link_login = 0; //将跳转连接设置为0,使跳转失效
                        //将注册按钮改成退出,
                        this.register_name = "退出";
                        this.link_register = "/home/login/"
                    }

                }).catch(error => {
                    console.log(error);
                })
            },
            //注册/退出的变换按钮,在点击时清除数据,跳转至登录页面,并提示退出成功(分两种情况,点没有点记住我按钮)
            register_button() {
                this.$router.push(this.link_register);
                sessionStorage.clear();
                localStorage.clear();
                this.$message({
                    message: "退出成功",
                    type: "success"
                });

            },
            //用来判断是否有登录状态(下面分析的session存储name的,不适合在这里写)
            is_head() {
                let token = localStorage["user_token"];
                if (token) {
                    //token存在则进入此页面\,刷新此页面
                    //不能这样写,不然一直在刷新
                    // this.$router.go(0)
                    console.log(token);

                    //用户有登录信息时,将登录按钮换成用户名,并且禁用按钮
                    //  这里需要注意的是:在用户登录未点击时,name存在session中,点击时,所有应当和展示导航栏写一块(功能相同)
                    this.login_name = localStorage["username"];
                    this.link_login = 0; //将跳转连接设置为0,使跳转失效
                    //将注册按钮改成退出,
                    this.register_name = "退出";
                    // 并且在点击时跳转至登录页面,清除local数据,提示退出成功( 先改,再清,提示,跳转 ),所以下面的暂时不用
                    // localStorage.clear();
                    // this.$message({
                    //     message:"退出成功",
                    //     type:"success"
                    // });
                    //
                    this.link_register = "/home/login/"

                } else {
                    //不存在,跳转至登录页面,不存在也可以登录至主页面,然后在里面点击登录值,(和以前的需求不一样)
                    // this.$router.push("/home/login")
                }
            }
        },
        created() {
            this.get_all_header()
            this.is_head()
        },
        components: {}
    }
</script>

<style scoped>
    .header-box {
        height: 80px;
    }

    .header {
        width: 100%;
        height: 80px;
        box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 99;
        background: #fff;
    }

    .header .content {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
    }

    .header .content .logo {
        height: 80px;
        line-height: 80px;
        margin-right: 50px;
        cursor: pointer; /* 设置光标的形状为爪子 */
    }

    .header .content .logo img {
        vertical-align: middle;
    }

    .header .nav li {
        float: left;
        height: 80px;
        line-height: 80px;
        margin-right: 30px;
        font-size: 16px;
        color: #4a4a4a;
        cursor: pointer;
    }

    .header .nav li span {
        padding-bottom: 16px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .header .nav li span a {
        display: inline-block;
    }

    .header .nav li .this {
        color: #4a4a4a;
        border-bottom: 4px solid #ffc210;
    }

    .header .nav li:hover span {
        color: #000;
    }

    .header .login-bar {
        height: 80px;
    }

    .header .login-bar .shop-cart {
        margin-right: 20px;
        border-radius: 17px;
        background: #f7f7f7;
        cursor: pointer;
        font-size: 14px;
        height: 28px;
        width: 100px;
        margin-top: 30px;
        line-height: 32px;
        text-align: center;
    }

    .header .login-bar .shop-cart:hover {
        background: #f0f0f0;
    }

    .header .login-bar .shop-cart img {
        width: 15px;
        margin-right: 4px;
        margin-left: 6px;
    }

    .header .login-bar .shop-cart span {
        margin-right: 6px;
    }

    .header .login-bar .login-box {
        margin-top: 33px;
    }

    .header .login-bar .login-box span {
        color: #4a4a4a;
        cursor: pointer;
    }

    .header .login-bar .login-box span:hover {
        color: #000000;
    }

    a {
        text-decoration: none;
        color: #333;
    }

    .member {
        display: inline-block;
        height: 34px;
        margin-left: 20px;
    }

    .member img {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: inline-block;
    }

    .member img:hover {
        border: 1px solid yellow;
    }

    .header .login-bar .login-box1 {
        margin-top: 16px;
    }

    a:hover {
        display: inline-block;
    }
</style>
